<template>
  <div style="position:fixed;bottom:12px;left:12px;">
    <div v-if="!legendShow" class="map-tools-container">
      <dl @click="legendShow = true">
        <dt class="iconfont icon-tuli" style="font-size:24px;" />
        <dd class="font14">图例说明</dd>
      </dl>
    </div>
    <el-card v-else class="box-card">
      <div slot="header" class="clearfix">
        <span>设备状态图标说明</span>
        <span class="iconfont icon-cuohao" @click="legendShow = false" />
      </div>
      <div class="text-item" style="margin: -16px 0">
        <p v-for="(item, index) in infos" :key="index" class="flex">
          <img alt="" :src="item.picture">
          <span class="font14">{{ item.name }}</span>
        </p>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      legendShow: false,
      infos: [
        {
          name: '设备运行',
          color: 'green',
          picture: 'https://img.intelirri.com/device/pg/d_run.png'
        },
        {
          name: '设备正转',
          color: 'green',
          picture: 'https://img.intelirri.com/device/pg/d_forward.png'
        },
        {
          name: '设备反转',
          color: 'green',
          picture: 'https://img.intelirri.com/device/pg/d_reverse.png'
        },
        {
          name: '设备停止',
          color: 'gray',
          picture: 'https://img.intelirri.com/device/pg/d_close.png'
        },
        {
          name: '设备掉线',
          color: 'gray',
          picture: 'https://img.intelirri.com/device/pg/d_break.png'
        },
        {
          name: '设备故障',
          color: 'gray',
          picture: 'https://img.intelirri.com/device/pg/d_trouble.png'
        }
      ]
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
  .tip{
    span{
      display:inline-block;
      line-height:1.5em;
      font-size:14px;
    }
  }
  .box-card {
    width: 376px;
    .el-card__body {
      padding: 0 32px;
    }
    span.iconfont {
      float: right;
      cursor: pointer;
      &:hover {
        color: #466ff3;
      }
    }
  }
  .text-item {
    img {
      width: 24px;
      height: 24px;
      margin-right: 12px;
      &.img-b{
        width:150px;
        height:150px;
        float:left;
        margin:4px 12px 0 0;
      }
    }
    p {
      float:left;
      width:50%;
      align-items: center;
      padding:12px 0;
      margin-block-start:0;
      margin-block-end: 0;
      span.color-block{
        display:inline-block;
        width:24px;
        height:24px;
        border-radius:50%;
      }
    }
  }
</style>
